// 移动端适配
import { useBreakpoints } from "@vueuse/core";
import { watchEffect, reactive, ref } from "vue";
import useScreenStore from "@/store/layout/screen.ts";
// 获取当前移动端适配仓库
const screenStore = useScreenStore();

export function useLoginScreen() {
  // 登录页面是否居中
  const loginPosition = ref(screenStore.loginPosition);
  // 根据屏幕适配是否改变背景
  const registerBackground = ref(screenStore.registerBackground);
  // 获取移动端大小时是否隐藏
  const breakpointsEnum = {
    xl: 1600, // 移动端大屏幕
    lg: 1199, // 正常屏幕
    md: 991,
    sm: 625,
  };
  const breakpoints = reactive(useBreakpoints(breakpointsEnum));
  // 分别获取到我们的三种模式： 移动端布局、pad端、桌面端
  const isMobile = breakpoints.smaller("sm"); // 小于
  const isPad = breakpoints.between("sm", "md"); // 区间
  const isDesktop = breakpoints.greater("md"); // 大于
  watchEffect(() => {
    // console.log("isMobile", isMobile.value);
    if (isPad.value) {
      // IPad
      console.log("isPad-login", isPad.value);
      screenStore.setLoginHidden(false);
      screenStore.setRegisterBackground("rgba(255, 255, 255, 0.8)");
      screenStore.setLoginPosition(0);
      registerBackground.value = screenStore.registerBackground;
      loginPosition.value = screenStore.loginPosition;
    }

    // 手机端
    if (isMobile.value) {
      console.log("isMobile-login", isMobile.value);
      screenStore.setLoginHidden(true);
      screenStore.setRegisterBackground("none");
      screenStore.setLoginPosition(1);
      registerBackground.value = screenStore.registerBackground;
      loginPosition.value = screenStore.loginPosition;
    }

    if (isDesktop.value) {
      // PC端
      console.log("isDesktop-login", isDesktop.value);
      screenStore.setLoginHidden(false);
      screenStore.setRegisterBackground("rgba(255, 255, 255, 0.8)");
      screenStore.setLoginPosition(0);
      registerBackground.value = screenStore.registerBackground;
      loginPosition.value = screenStore.loginPosition;
    }
  });

  return {
    loginPosition,
    registerBackground,
  };
}
